We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .

Tabs

Default Tabs

Overview Header

This is a test section

Speakers Header

This is a test section

Agenda Header

This is a test section

Location Header

This is a test section

Pricing Header

This is a test section

Sponsors Header

This is a test section

Event Info Header

This is a test section

HTML

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#overview" aria-expanded="true">Overview</a></li>
    <li class=""><a data-toggle="tab" href="#speakers" aria-expanded="false">Speakers</a></li>
    <li class=""><a data-toggle="tab" href="#agenda" aria-expanded="false">Agenda</a></li>
    <li><a data-toggle="tab" href="#location">Location</a></li>
    <li class=""><a data-toggle="tab" href="#pricing" aria-expanded="false">Pricing</a></li>
    <li class=""><a data-toggle="tab" href="#sponsors" aria-expanded="false">Sponsors/Exhibitors</a></li>
    <li class=""><a data-toggle="tab" href="#eventInfo" aria-expanded="false">Event Info</a></li>
</ul>
<div class="tab-content tab-group-content">
    <noscript>
        <style>
            .tab-content > .tab-pane {
                display: block;
                opacity: 1;
            }
        </style>
    </noscript>
    <section id="overview" class="tab-pane fade in active">
        <h2>Overview Header</h2>
        <p>This is a test section</p>
    </section>
    <section id="speakers" class="tab-pane fade">
        <h2>Speakers Header</h2>
        <p>This is a test section</p>
    </section>
    <section id="agenda" class="tab-pane fade">
        <h2>Agenda Header</h2>
        <p>This is a test section</p>
    </section>
    <section id="location" class="tab-pane fade">
        <h2>Location Header</h2>
        <p>This is a test section</p>
    </section>
    <section id="pricing" class="tab-pane fade">
        <h2>Pricing Header</h2>
        <p>This is a test section</p>
    </section>
    <section id="sponsors" class="tab-pane fade">
        <h2>Sponsors Header</h2>
        <p>This is a test section</p>
    </section>
    <section id="eventInfo" class="tab-pane fade">
        <h2>Event Info Header</h2>
        <p>This is a test section</p>
    </section>
</div>

Problem Being Solved

Users need to navigate between sections of related content.

Platform Availability

  • Sitecore
  • BERT applications

When to Use

It can be used when content needs to be broken into smaller chunks to be easily navigated and understood. It can be used to provide a layer of sub-navigation within a website. Recommend between two and six tabs.

When Not to Use

It should not be used for less than two tabs.

Formatting

Make sure to include the <noscript> tag section right inside the tab-content/tab-group-content section so that if JavaScript doesn't load, all of the tab content sections will display.

Alternative Tabs

Level I

This is a test section

Level II

This is a test section

Level III

This is a test section

HTML

<section class="grid-container">
    <div class="tab-group full-width">
        <form class="tab-group-tabs-form">
            <label class="control-label" for="tab-group-tabs-dropdown">Tabs Title</label>
            <div id="tab-group-tabs-dropdown" class="form-group">
                <select class="form-control tab-group-tabs-form-select" aria-describedby="select-list-control-label">
                    <option value="#leveli">Level I</option>
                    <option value="#levelii">Level II</option>
                    <option value="#leveliii">Level III</option>
                </select>
            </div>
        </form>
        <ul class="tab-group-tabs">
            <li class="tab-group-tabs-item-title active"><a data-toggle="tab" href="#leveli">Level I</a></li>
            <li class="tab-group-tabs-item-title"><a data-toggle="tab" href="#levelii">Level II</a></li>
            <li class="tab-group-tabs-item-title"><a data-toggle="tab" href="#leveliii">Level III</a></li>
        </ul>
        <div class="tab-content tab-group-content">
            <noscript>
                <style>
                    .tab-content > .tab-pane {
                        display: block;
                        opacity: 1;
                    }
                </style>
            </noscript>
            <section id="leveli" class="tab-pane fade in active">
                <h2>Level I</h2>
                <p>This is a test section</p>
            </section>
            <section id="levelii" class="tab-pane fade">
                <h2>Level II</h2>
                <p>This is a test section</p>
            </section>
            <section id="leveliii" class="tab-pane fade">
                <h2>Level III</h2>
                <p>This is a test section</p>
            </section>
        </div>
    </div>
</section>

Problem Being Solved

Similar content is grouped into specific categories, to allow the user to view only the content that applies to them.

When to Use

It can be used when content can naturally be grouped into a small number of categories, and any given user would only need to view one or two categories. For example, it can be used for content about exam levels.

When Not to Use

  • It should not be used for more than 4 categories of content, or to group unrelated content.
  • Do not use if you only have one tab. There should be at least two tabs.

Formatting

  • Place tab-group in a section that has the class name "grid-container"
  • Make sure to include the <noscript> tag section right inside the tab-content/tab-group-content section so that if JavaScript doesn't load, all of the tab content sections will display.
  • Make sure value for each select option is the id of the related tab.